<template>
    <div>
        <div class="parent" :style="{'justify-content':propValue.flex}">
            <div class="parent_list" v-for="(item,i) in propValue.imgList" :key="i" :style="{'width':propValue.width+'rem', 'height':propValue.height+'rem', 'background' : propValue.backgroundColor, 'border-radius': propValue.borderRadius+'rem',margin:propValue.boxMargin+'rem','box-shadow':propValue.shadow?'0px 4px 40px 1px rgba(43,89,255,0.0784)':'','padding-left':propValue.paddingTransverse+'rem','padding-right':propValue.paddingTransverse+'rem','padding-top':propValue.paddingVertical+'rem','padding-bottom':propValue.paddingVertical+'rem'}">
                <div class="son">
                    <div class="icon" >
                        <img :src="item.img" :style="{'margin-top':propValue.iconMarginTop+'rem', 'margin-left':propValue.iconMarginLeft+'rem',width:propValue.imgwidth+'rem',height:propValue.imgheight+'rem'}" alt="">
                    </div>
                    <div :style="{'margin-top':propValue.titleMarginTop+'rem', 'margin-left':propValue.titleMarginLeft+'rem', 'font-size':propValue.titleSize+'rem', 'font-weight':propValue.titleWeight,color:propValue.titleColor}">{{item.title}}</div>
                    <div class="sub_content" :style="{'margin-top':propValue.contentMarginTop+'rem', 'margin-left':propValue.contentMarginLeft+'rem', 'margin-right':propValue.contentMarginRight+'rem', 'padding-left':propValue.contentPaddingLeft+'rem', 'padding-right':propValue.contentPaddingRight+'rem', 'font-size':propValue.contentSize+'rem', 'font-weight':propValue.contentWeight,color:propValue.contentColor}">{{item.content}}</div>
                </div>
            </div>
        </div>

        <!-- <div class="parent2" v-else-if="propValue.radio == 2">
            <div class="parent_list parent_list2" v-for="(item,i) in propValue.imgList" :key="i" :style="{'width':propValue.width+'rem', 'height':propValue.height+'rem', 'background' : propValue.backgroundColor, 'border-radius': propValue.borderRadius+'rem'}">
                <div class="son2 ">
                    <div class="icon2" :style="{'margin-top':propValue.iconMarginTop+'rem', 'margin-left':propValue.iconMarginLeft+'rem'}">
                        <img :src="item.img" alt="">
                    </div>
                     <div :style="{'margin-top':propValue.titleMarginTop+'rem', 'margin-left':propValue.titleMarginLeft+'rem', 'font-size':propValue.titleSize+'rem', 'font-weight':propValue.titleWeight}">{{item.title}}</div>
                    <div :style="{'margin-top':propValue.contentMarginTop+'rem', 'margin-left':propValue.contentMarginLeft+'rem', 'font-size':propValue.contentSize+'rem', 'font-weight':propValue.contentWeight}">{{item.content}}</div>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>

export default {
 props: {
        propValue: {
            type: Object,
            default: {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {

        }
    },
}
</script>

<style lang="scss" scoped>
    .parent {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .parent_list {
            // margin: 13rem;
            display: flex;
            justify-items: center;
            // align-items: center;

           .sub_content{
            // padding:0 30rem;
            line-height: 1.8;
           }
            .son {
               width: 100%;
                .icon {
                    text-align: center;
                    img {
                        width: 100%;
                        height: 100%;
                    }
            }
                >div{
                    width: 100%;
                }


            }

        }

    }
    .parent_list:hover {
box-shadow: 0px 4px 40px 1px rgba(43,89,255,0.0784);
        // border: 1px solid pink;
    }
    // .parent2 {
    //     display: flex;
    //     justify-items: center;
    //     align-items: center;
    //     flex-wrap: wrap;
    //     margin: 20rem;
    //     .parent_list2 {
    //         margin: 25rem;
    //         display: flex;
    //         justify-items: center;
    //         align-items: center;
    //         .son2 {
    //             // margin: 0 auto;
    //             // text-align: center;
    //             .icon2 {
    //             width: 72rem;
    //             height: 80rem;
    //             img {
    //                 width: 100%;
    //                 height: 100%;
    //             }
    //         }
    //             >div{
    //                 width: 100%;
    //             }


    //         }

    //     }

    // }
</style>
